<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为登录</title>
		<style>
			body{
				/* margin: 0 auto; */
			}
			#hauwei{
				margin: 0 30% 0 30%;
				width: 60%;
				display: flex;
				justify-content: center;
				
				
			}
			#img{
				padding-top: 30px;
				padding-bottom: 10px;
				height: 50px;
				display: flex;
				justify-content: center;
				
			}
			#logo{
				margin: 0 auto;
				padding: 10px 20% 100px 20%;
				width: 528px;
			}
			img{
				width: 133px;
				height: 30px;				
			}
				
			#d1{
				background-color: white;
				height: 750px;
				margin: 0 auto;
				border-radius: 5px;
				/* height: 60%; */
				border: 1px lightgray solid;
				padding: 8px 10px 8px 10px;
				box-shadow: 10px 10px 30px 20px #D3D3D3;
				
			}
			h1{
				font-size: 50px;
				padding: 0px 15% 0 15%;
			}
			form{
				
				padding: 0px 15% 50px 15%;
			}
			#username{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			#password{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			a{
				color: #000000;
				
				
			}
			button{
				background-color: rgb(246,111,106);
				width: 100%;
				height: 50px;
				color: whitesmoke;
				border-radius: 5px;
				margin: 50px 0 5px 0;
				border: none;
			}
			button:hover{
				background-color: rgb(165,75,74);
				cursor: pointer;
				border: none;
			}
			
			#zhuce{
				display: flex;
				justify-content: center;
				/* padding-right:10%; */
				margin-top:40px;
				border-bottom: 1px #D3D3D3 solid;
				padding-bottom: 30px;
			}
			p{
				font-size: 18px;
				text-align: center;
			}
			#q{
				display: flex;
				justify-content: center;
			}
			#q img{
				width: 32px;
				
				
				
			}
			#next{
				padding-top: 30px;
			}
			span{
				color: red;
			}
			
			
			 
			
			
			
		</style>
	</head>
	<body>
		
		<div id="huawei">
			<div id="logo">
				<div id="img">
					<img src="../img/1.png" alt="logo">
				</div>
				<div id="d1">
					<h1>华为账号登录</h1>
					<form action="">
						<label for="username">账户/邮箱<span>*</span></label>
						<br>
						
						<input id="username" type="text" name="username" placeholder="请输入您的帐号" autocomplete="off">
						<br>
						
						<label for="password">密码<span>*</span></label>
						<br>
						<input id="password" type="password" name="password" placeholder="请输入您的密码">
						<br>
						忘记密码
						<br>
						<button><a href="../shouye.html" style="text-decoration: none;color: #fff;">登录</a></button>
						<br>
						<div id="zhuce">
							<a href="../zhuce.html">立即注册</a>
							
						</div>
						<div id="other">
							<p>通过其他方式登录</p>
							<div id="q">
								<a href="#"><img src="../img/2.png" ></a>
								<a href="#"><img src="../img/3.png" ></a>
							</div>
							
						</div>
						<div id="next">
							<a href="#">获得更多帮助?</a>
						</div>
						
					</form>
					
					
				</div>
				
				
				
			</div>
			
			
		</div>
		
		
	</body>
</html>

